.index-one {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--edge-tb) var(--edge-lr);
}

.welcome-word {
    color: var(--title-color);
}

@font-face {
    font-family: "思源宋体 Bold";
    font-weight: 700;
    src: url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/ZKkU9C1Xu2Bc.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/5QqhARBySScz.woff") format("woff");
    font-display: swap;
}

.welcome-word .greets {
    text-transform: capitalize;
    animation: var(--animation);
    font-size: 18px;
    color: var(--title-color);
    font-family: "思源宋体 Bold", serif;
}

.welcome-word .thanks {
    font-family: var(--font-family-slogn);
    font-size: max(1.25rem,var(--sun-size) / (var(--count) + 1));
    letter-spacing: max(2px,var(--sun-size) / var(--count) / 10);
    animation: var(--animation);
    animation-delay: .3s;
}
.welcome-word .thanks:before{
    content: var(--title-text,"");
    position: absolute;
    opacity: 0;
    transform: scale(1.1);
    inset-inline: var(--edge-lr);
    white-space: nowrap;
    overflow: hidden;
    transition: .5s;
}
.welcome-word .thanks .text-effect {
    -webkit-mask: linear-gradient(#000 30%,rgb(0 0 0 / .5));
}

.season .welcome-word .thanks {
    animation: none;
}
.rand-post ul {
    list-style: none;
    margin: 0;
}
.season .welcome-word .thanks:before {
    opacity: 1;
    transform: none;
    transition-delay: .3s;
}

.rand-post li {
    --width: 1em;
    --animation-duration: 3s;
    --animation-delay: 0s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 90%;
    max-width: 90%;
    scroll-snap-align: start;
}

time {
    font-variant: lining-nums;
    display: inline-block;
}

.rand-post li time {
    vertical-align: middle;
}

.rand-post li .star {
    position: relative;
    display: block;
    flex: none;
    width: var(--width);
    aspect-ratio: 1;
    background: var(--star-color);
    border-radius: 50%;
    box-shadow: 0 0 0.5rem 0.25rem var(--star-shadow-out), inset 0 0 0.2rem 0 var(--star-shadow-out);
    animation: stars var(--animation-duration) var(--animation-in) var(--animation-delay) infinite, rotate 10s linear infinite;
}

.rand-post li:nth-of-type(1) .star {
    width: calc(var(--width) * .7);
    outline: 2px dotted var(--flow-color);
    outline-offset: calc(var(--width) * .4);
}

.rand-post li .post {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--s-bg, rgb(255 255 255 / .5));
    box-shadow: var(--box-shadow-white);
}

.rand-post li span {
    padding: .5em;
    line-height: 1;
    background: hsl(var(--font-color) / .05);
    -webkit-box-decoration-break: clone;
    border-radius: 1em;
    vertical-align: middle
}

.rand-post li:nth-of-type(2) .star:after {
    content: "";
    position: absolute;
    background: var(--star-color);
    height: 0.2rem;
    width: 0.2rem;
    left: -0.2rem;
    top: -0.2rem;
    border-radius: 50%;
}

.rand-post li:nth-of-type(3) .star {
    width: calc(var(--width) * 1.2);
}

@media (max-width: 1024px) {
    .rand-post {
        margin: 1rem -1rem -2rem;
        padding: 1rem 1rem 2rem;
        overflow: auto;
        animation: var(--animation);
        animation-delay: .5s;
    }

    .rand-post ul {
        position: relative;
        margin: calc(var(--edge-lr) * -2) calc(var(--edge-lr) * -1);
        padding: calc(var(--edge-lr) * 2) var(--edge-lr);
        -webkit-mask: linear-gradient(90deg, #0000, #000) no-repeat 0 0 / calc(var(--edge-lr) * 1.5) 100%,
        linear-gradient(90deg, #000, #000) no-repeat center / calc(100% - var(--edge-lr) * 3) 100%,
        linear-gradient(90deg, #000, #0000) no-repeat 100% center / calc(var(--edge-lr) * 1.5) 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
        overflow: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        scroll-padding: var(--gap-divs);
    }

    .rand-post li .post {
        padding: 0;
        background: none;
        box-shadow: none;
    }
}

@media (min-width: 1025px) {
    .welcome-word .greets {
        margin: -1rem 0 0;
        width: 100%;
        line-height: 1;
    }

    .rand-post {
        position: absolute;
        width: clamp(20rem, 60vw, 100%);
        height: clamp(20rem, 60vh, 100%);
        pointer-events: none;
        transition: 1s;
    }

    .rand-post li {
        --width: 1.25rem;
        position: absolute;
        justify-content: center;
        left: 0;
        top: calc(var(--star-top) * 1%);
        pointer-events: auto;
        animation: stars-scale 1.5s var(--animation-in) 1 backwards, opacity 1.5s var(--animation-in) 1 backwards;
        animation-delay: 1s;
    }

    .rand-post li:nth-of-type(2) {
        --animation-duration: 4s;
        --animation-delay: .5s;
        left: 100%;
        animation-delay: 1.5s;
    }

    .rand-post li:nth-of-type(3) {
        --animation-duration: 3s;
        --animation-delay: 1s;
        left: 40%;
        animation-delay: 1.9s;
    }

    .rand-post li .star {
        box-shadow: 0 0 1rem 0.5rem var(--star-shadow-out), inset 0 0 0.2rem 0 var(--star-shadow-out);
    }

    .rand-post li:hover .star {
        scale: 2;
    }
}

@media (min-width: 1153px) {
    .full {
        min-height: 100vh;
    }

    .index-one {
        place-items: center;
        text-align: center;
        padding: var(--edge-tb) var(--edge-lr);
    }

    .nav-fixed .rand-post {
        scale: 1.2;
        opacity: 0;
        visibility: hidden;
    }

    .rand-post li:hover::after {
        opacity: 1;
        transform: none
    }

    .rand-post li .post {
        position: absolute;
        pointer-events: none;
        padding: 0.5rem;
        z-index: 2;
        line-height: 1;
        max-width: 40vw;
        opacity: 0;
        border-radius: 1.25rem;
        border: 2px dotted var(--sun-color);
        backdrop-filter: saturate(1.8) blur(20px);
        transition: all .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    .rand-post li:hover > .star + .post {
        opacity: 1;
        transform: translateY(-2rem);
    }
}
